 <template>
  <div>
    <Hedar></Hedar>
    <div class="headers">
      <div class="headerLeft">
        <router-link to="/EntryS"><img v-bind:src =  myfilter3(bannerimg) alt="/;" /></router-link>
        <span>{{business}}</span>
      </div>
      <div class="headerRight">
        <div>
          <input type="text" class="phone" v-model="Verification" placeholder=""  ref="Verification" /><button class="phones" @click="search()">搜索</button>
        </div>
      </div>
    </div>
    <Navs :massage="pageId" :shopinfor="shops"></Navs>
    <div class="banner">
      <el-carousel height="360px">
        <el-carousel-item v-for="(item , index) in asb" :key="index">
          <img v-bind:src = item />
        </el-carousel-item>
      </el-carousel>

    </div>
    <div class="middleTitle">
      <h3><span>{{title2}}</span></h3>
      <ul>
        <li v-for="hot in hots">
            <router-link :to="{path:'/Shopdetails',query: { id:hot.gdId}}">
                
                  <img v-bind:src = myfilter(hot.gdImg) alt="/">
                  <!--<img v-bind:src = hot.gdImg alt="/">-->
                  <p class="hots1">¥{{hot.gdName}}</p>
                  <p class="hots2"></p>
                
            </router-link>
        </li>
      </ul>
    </div>
    <div class="compon1" v-if="ok">
       <h3><span>{{title}}</span></h3>

      <el-row :gutter="20" >
        <el-col :span="6" v-for="(todo , index) in todos" :key="index" class="Company">
          <div class="grid-content">
            <router-link :to="{path:'/Shopdetails',query: { id:todo.gdId}}">
              <div class="imgdiv">
                <img v-bind:src =  myfilter(todo.gdImg) alt="" />
              </div>
              <div class="Pricediv">
                <p>¥{{todo.gdPrice}}</p>
                <p>{{todo.gdName}}</p>
                <!--<p>已售:<span>{{todo.Sold}}</span>评论:<span>{{todo.comment}}</span></p>-->
              </div>
            </router-link>
          </div>

        </el-col>

      </el-row>
    </div>

    <div class="pages_as">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="12"
          layout="prev, pager, next, jumper"
          :total="count">
        </el-pagination>
      </div>

    </div>
    <!--<div class="footera">-->

    <!--<ul>-->
    <!--<li v-for="item in items">-->
    <!--<router-link to="/LoginS">-->
    <!--<p><img v-bind:src = item.imgs alt="/.." /></p>-->
    <!--<p></p>-->
    <!--<p>{{item.text}}</p>-->
    <!--</router-link>-->
    <!--</li>-->
    <!--</ul>-->
    <!--</div>-->
    <!--<ul class="list">-->
      <!--<li>100%正品</li>-->
      <!--<li>双重质检</li>-->
      <!--<li>全球化采购</li>-->
      <!--<li>无理由退货</li>-->
      <!--<li>贵就赔</li>-->
      <!--<li>万千口碑</li>-->
    <!--</ul>-->
    <Footers></Footers>
  </div>
</template>

<script>
  import Footers from'@/components/Footers'
  import Hedar from'@/components/Hedar'
  import Navs from'@/components/Navs'
  import options3 from '../../static/jiashuju'
  export default{
    data(){
      return{
        asb: [
          require('@/assets/bigbanner.png'),
          require('@/assets/bigbanner.png'),
          require('@/assets/bigbanner.png'),
          require('@/assets/bigbanner.png')],
        ok:true,
        currentPage3: 1,
        business: '雷士照明',
        bannerimg: require('@/assets/loge.png'),
        Bigbanner: require('@/assets/bigbanner.png'),
        Verification:'',
        title:"本店商品",
        title2:"店铺推荐",
        items:[
          {
            imgs:require('@/assets/bg1.png'),
            text:'厨房专区',
          },
          {
            imgs:require('@/assets/bg2.png'),
            text:'卧室专区',
          },
          {
            imgs:require('@/assets/bg3.png'),
            text:'客厅专区',
          },
          {
            imgs:require('@/assets/bg3.png'),
            text:'客厅专区',
          },
          {
            imgs:require('@/assets/bg3.png'),
            text:'客厅专区',
          },
          {
            imgs:require('@/assets/bg3.png'),
            text:'客厅专区',
          },
        ],
        todos:'',
        pageId:'',
        count:12,
        shops:'',
        gdsName:'',
        hots:[
          {gdImg:require('@/assets/bg1.png'),gdPrice:"dsfaf都发谁打算多给谁大公司的公司给斯疯似的疯似的高富帅d"},
          {gdImg:require('@/assets/bg1.png'),gdPrice:"dd"},
          {gdImg:require('@/assets/bg1.png'),gdPrice:"dd"},
          {gdImg:require('@/assets/bg1.png'),gdPrice:"dd"},
        ],

      }
    },
    components:{
      Footers,
      Hedar,
      Navs,

    },
    methods: {
      menu() {
        window.scrollTo(0,0);
      },
      myfilter(value){
        return 'http://wut1.oss-cn-beijing.aliyuncs.com/'+ value.split(';')[0]

      },
      myfilter3(value){
        return 'http://wut3.oss-cn-beijing.aliyuncs.com/'+ value.split(';')[0]

      },
      search:function(){
//        console.log(this.Verification)
        this.list_one(1,this.pageId,this.Verification)
      },
      getQueryString(name){
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.href.split('?')[1].match(reg);
        if (r != null){
          return decodeURI(r[2]);
        }
        return null;
      },
      handleSizeChange(val) {
//        console.log(`每页 ${val} 条`);
        this.list_one(val,this.pageId,this.Verification)
      },
      handleCurrentChange(val) {
//        console.log(`当前页: ${val}`);
        this.list_one(val,this.pageId,this.Verification)
      },
      list_one(page,gdsid,gdname){
        if(this.Verification){
          var aats="http://www.wutongsd.com/awm/selectByNameShop.do?page="+page+"&adExId="+gdsid+"&gdName="+gdname
        }else{
          var aats="http://www.wutongsd.com/awm/selectGoodsShop.do?page="+page+"&adExId="+gdsid
        }
        let vam=this
        $.ajax({
          type: "GET",
          url: aats,
          dataType: "json",
          success: function(data){
            vam.count=data.resultData.count
            if(data.resultData.shop){
              vam.shops=data.resultData.shop
              vam.bannerimg=data.resultData.shop.adShopLogo
              vam.business=data.resultData.shop.adShopName
            }
//            console.log(data)
            vam.todos=data.resultData.list
            vam.hots=data.resultData.tjList
          },
          error:function(aa){
//            console.log(aa)
          }
        });
      }

    },
    mounted:function(){
      this.pageId = this.getQueryString('id')
      sessionStorage.setItem('listIdall',this.getQueryString('id'))
      this.list_one(1, this.pageId,this.gdsName)
//      this.list_one(1, 1)
      this.menu()

    }
  }
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;

  }



  .grid-content {
    border:1px solid #b5b5b5;
    padding:12px;
    height: 290px;
    width:260px;
    margin-bottom:16px;
  }



  .headers{
    height:165px;
    width:100%;
    overflow: auto; zoom: 1;
  }



  .headerLeft{
    float:left;
    height:160px;
    line-height:160px;
    width:600px;

  }
  .headerLeft span{
    font-size:30px;
    height:160px;
    line-height:160px;
    margin-left:50px;

  }
  .headerLeft a{
    display:inline-block;
    height:160px;
    width:200px;
  }
  .headerLeft img{
    height:60px;
    width:180px;
  }
  .headerRight{
    float:left;
    height:160px;
    width:560px;

  }
  .headerRight div{
    margin-top:45px;
    height:50px;
    width:490px;
    overflow: auto; zoom: 1;
    background:#eaeaea;
  }
  .headerRight div input{
    height:48px;
    width:398px;
    border:none;
    background:#eaeaea;
    text-indent:15px;
    float:left;
    border:1px solid #ff8328;
  }
  .headerRight div button{
    float:left;
    height:50px;
    width:90px;
    background:#ff8328;
    border:none;
    font-size:15px;
    color:#fff;
  }
  .banner{
    width:100%;
    height:360px;

  }
  .compon1{
    padding-top:35px;
    min-height:500px;
    background:#f1f1f1;
  }
  
  .imgdiv{
    height:200px;
    width:260px;
  }
  .imgdiv img{
    height:200px;
    width:260px;
  }
  .Pricediv{
    height:88px;
    width:260px;
    text-align:left;
  }
  .Pricediv p:nth-child(1){
    height:30px;
    width:260px;
    color:#e64346;
    line-height:30px;
  }
  .Pricediv p:nth-child(2){
    height:46px;
    width:260px;
    font-size:12px;
    overflow:hidden;
    line-height:22px;

  }
  .Pricediv p:nth-child(3){
    height:15px;
    width:260px;
    font-size:12px;

    line-height:15px;

  }
  .Pricediv p:nth-child(3) span{
    display:inline-block;
    width:57px;
    margin-left:5px;
    color:#317dd2;


  }
  .footera{
    width:100%;
    overflow: auto; zoom: 1;
  }
  .footera li{
    width:25%;
    float:left;
    height:200px;
    position: relative;


  }
  .footera li p:nth-child(1){
    width:100%;
    height:200px;
    position: absolute;
    left:0;
    top:0;
    z-index:0.5;
  }
  .footera li p:nth-child(1) img{
    width:100%;
    height:200px;

  }
  .footera li p:nth-child(2){
    width:100%;
    height:200px;
    position: absolute;
    left:0;
    top:0;
    background:#000;
    opacity: 0.4;
    z-index:1;
  }
  .footera li p:nth-child(2):hover{
    opacity: 0;
  }
  .footera li p:nth-child(3){
    width:100%;
    height:33px;
    font-size:33px;
    color:#fff;
    position: absolute;
    left:0;
    top:80px;
    z-index:2;

  }
  .list{
    height:182px;
    margin:0 auto;
    width:1060px;
    overflow: auto; zoom: 1;

  }
  .list li{
    float:left;
    height:182px;
    width:163px;
    background:red;
    text-align:right;
    line-height:270px;

  }
  .list li:nth-child(1){
    background:url(../assets/three.png) no-repeat 101px 42px;
  }
  .list li:nth-child(2){
    background:url(../assets/four.png) no-repeat 101px 42px;

  }
  .list li:nth-child(3){
    background:url(../assets/five.png) no-repeat 101px 42px;

  }
  .list li:nth-child(4){
    background:url(../assets/six.png) no-repeat 101px 42px;

  }
  .list li:nth-child(5){
    background:url(../assets/two.png) no-repeat 101px 42px;

  }
  .list li:nth-child(6){
    background:url(../assets/one.png) no-repeat 101px 42px;

  }
  .pages_as{
    width:1200px;
    height:90px;
    margin:0 auto;
    padding-top:50px;
  }
.middleTitle h3,.compon1 h3{
   height: 50px;
   border-bottom: 2px #000000 solid;
   text-align:center;
   margin:0 auto 59px;
   width:322px;
   background:#f1f1f1;
 }
 .middleTitle h3 span,.compon1 h3 span{
  position: relative;
  display:inline-block;
  width:175px;
  background:#f1f1f1;
  margin-top:25px;
  font-size:30px;
  
}
.middleTitle{
    padding-top:19px;
    min-height:300px;
    background:#f1f1f1;
}
.middleTitle ul{
    width:1217px;
    

}
.middleTitle ul{
    width:1217px;
    
}

.middleTitle ul li p{
  height:65px;
  width:158px;
  line-height:30px;
  overflow:hidden;
  position:absolute;
  bottom:0;
  color:#fff;
  text-align:left;

}
.middleTitle ul li .hots1{
  z-index:9;
  font-size:10px;
  height:35px;
  width:260px;
  margin:15px;
  line-height:15px;
  overflow:hidden;

}
.middleTitle ul li .hots2{
  width:290px;
  background:#000;
  Opacity:0.4;
  z-index:1;

}
.middleTitle ul li{
  height:300px;
  width:290px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position:relative;
  padding-left:16px;
}
.middleTitle ul li img{
  height:300px;
  width:290px;

}
</style>
